<script setup>
import { computed } from 'vue'
import UserInfo from '@/components/UserInfo.vue'

const props = defineProps({
  user: Object
})

const emit = defineEmits(['changeStatus', 'rechargeStatus', 'clickControl', 'showDetail', 'blanaceDetail'])

const userRole = computed(() => {
  if (props.user.status === -1) return '不允许'

  const is_anchor = props.user.is_anchor
  const is_agent = props.user.is_agent

  let str = ''

  if (!is_anchor && !is_agent) {
    str += '普通用户'
    return str
  }

  if (is_anchor) {
    str += '主播 '
  }

  if (is_agent) {
    str += '推广员 '
  }
  return str
})
</script>

<template>
  <div class="user-item">
    <UserInfo :nickname="user.nickname" :avatar="user.avatar" :id="user.id" :role="userRole"></UserInfo>
    <span style="color: red;">{{ user.remark }}</span>
    <div class="user-control">
      <van-switch inactive-color="red" @update:model-value="emit('changeStatus', { id: user.id, status: $event })"
        class="user-control-switch" :model-value="user.status === 1" :disabled="user.status === -1" />
      <van-switch inactive-color="red" @update:model-value="emit('rechargeStatus', { id: user.id, status: $event })"
        class="user-control-switch" :model-value="user.is_recharge === 1" :disabled="user.is_recharge === -1" />
      <van-button size="small" type="primary" @click="emit('clickControl', user.id)">操作
      </van-button>
      <van-button style="margin-left: 10px" size="small" type="success" @click="emit('showDetail')">详情</van-button>
      <van-button style="margin-left: 10px" size="small" type="danger" @click="emit('blanaceDetail')">余额</van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.user-item {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .user-control {
    display: flex;
    align-items: center;

    .user-control-switch {
      margin-right: 10px;
    }
  }
}
</style>
